<!DOCTYPE html>
<html class="ui-mobile">
  <head>
    <title>Console Games Score</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">-->
    <link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" media="screen">
    <link href="css/swipebox.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/init.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/store-mobile.js"></script>
    <script src="js/jquery.swipebox.min.js"></script>
	<link rel="Stylesheet" href="css/store.css" />
  </head>
	<body>
	<div id="Home" data-role="page" data-theme="a">
		<header data-role="header"><h1>Console Games Store</h1></header>
		<div class="content" data-role="content">
			<a href="#NewGames" data-role="button">New Games</a>
			<a href="javascript:getUsedGames()" data-role="button"> Used Games</a>
			<a href="#Login" data-role="button" data-rel="dialog" data-transition="pop">Login</a>
			<a href="#Register" data-role="button" data-rel="dialog" data-transition="pop">Register</a>
		</div>
	</div>
	
	<div id="NewGames" data-role="page" data-theme="a">
		<header data-role="header"><h1>Console Games Store</h1></header>
		<a data-role="button" data-rel="back">Go Back</a>
		<div class="content" data-role="content">
			<h2>New Games</h2>
			<form method="post" id="game-search-form" action="GetGames">
				<div data-role="fieldcontain"><label for="allGenres">Genre: </label><select name="genreId" id="allGenres"><option>Select</option></select></div>
				<div class="clearfix"></div>
				<div data-role="fieldcontain"><label for="allConsoles">Console: </label><select name="consoleId" id="allConsoles"><option>Select</option></select></div>
				<div class="clearfix"></div>
				<input type="submit" value="Search" />
			</form>
			<div id="results">
			</div>
		</div>
	</div>
	
	<div id="UsedGames" data-role="page" data-theme="a">
		<header data-role="header"><h1>Console Games Store</h1></header>
		<a data-role="button" data-rel="back">Go Back</a>
		<div class="content" data-role="content">
			<h2>Used Games</h2>
			<div id="usedGameList">				
			</div>
		</div>
	</div>
	
	<div id="Game" data-role="page" data-theme="a">
		<header data-role="header"><h1>Console Games Store</h1></header>
		<a data-role="button" data-rel="back">Go Back</a>
		<div id="single-game" data-gameid="1">
			
		</div>
		<div id="shoppingCartWidget">
			<span class="closeWidget"></span>
			<div style="float: left;">
			<span class="widgetText"></span>
			<span class="watchShoppingCart">Watch Shopping Cart</span>
			</div>
		</div>
	</div>
	
	<div id="Login" data-role="dialog" data-theme="a" class="ui-corner-all">
		<header data-role="header"><h1>Login</h1></header>
		<form>
			<div style="padding:10px 20px;">
	          <label for="un" class="ui-hidden-accessible">Email:</label>
	          <input type="text" name="user" id="un" value="" placeholder="Email" data-theme="a" />

	          <label for="pw" class="ui-hidden-accessible">Password:</label>
	          <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />

	    	  <button type="submit" data-theme="b">Sign in</button>
			</div>
		</form>
	</div>
	<div id="Register" data-role="dialog" data-theme="a" class="ui-corner-all">
		<header data-role="header"><h1>Register</h1></header>
		<form id="RegisterForm">
			<div style="padding:10px 20px;">
         		<label for="email" class="ui-hidden-accessible">Email:</label>
				<input type="email" name="email" id="email" value="" placeholder="Email" data-theme="a" />
				
				<label for="fname" class="ui-hidden-accessible">First Name:</label>
				<input type="text" name="fname" id="fname" value="" placeholder="First Name" data-theme="a" />
				
				<label for="lname" class="ui-hidden-accessible">Last Name:</label>
				<input type="text" name="lname" id="lname" value="" placeholder="Last Name" data-theme="a" />
				
				<label for="phone" class="ui-hidden-accessible">Phone:</label>
				<input type="number" name="phone" id="phone" value="" placeholder="Phone" data-theme="a" />
				
				<label for="address" class="ui-hidden-accessible">Address:</label>
				<input type="text" name="address" id="address" value="" placeholder="Address" data-theme="a" />
				
				<label for="pw" class="ui-hidden-accessible">Password:</label>
				<input type="password" name="password" id="pw" value="" placeholder="password" data-theme="a" />
				
				<button type="submit" data-theme="b">Register</button>
				<p id="registerMessage"></p>
			</div>
		</form>
	</div>
	<div id="cart" data-role="dialog" data-theme="a">
		<div data-role="header">
				<h1>Shopping Cart</h1>
		</div> 
		 <div data-role="content" data-theme="a">
			<ul data-role="listview" data-count-theme="a" data-inset="true">

			</ul>
		</div>
	</div>
	<div data-role="popup" id="usedGameForm" data-theme="a" class="ui-corner-all">
		<form>
			<div style="padding:10px 20px;">
			  <h3>Enter Game Details</h3>
	          <label for="un" class="ui-hidden-accessible">Game Name:</label>
	          <input type="text" name="name" id="un" value="" placeholder="Game Name" data-theme="a" />

	          <label for="pw" class="ui-hidden-accessible">Description:</label>
	          <textarea  name="pass" id="pw" data-theme="a" ></textarea>

	    	  <button type="submit" data-theme="b">Publish Your Game</button>
			</div>
		</form>
	</div>
	<div data-role="dialog" data-theme="a" id="recommendationsPopup">
		<div data-role="header" data-position="fixed">
				<h1>Recommendations</h1>
		</div> 
		 <div data-role="content" data-theme="a">
			<ul id="recommendationsList" data-role="listview" data-count-theme="a" data-inset="true">
				
			</ul>
		</div>
	</div>
	<div id="Payment" data-role="dialog" data-theme="a" class="ui-corner-all">
		<header data-role="header"><h1>Payment</h1></header>
		<div data-role="content" data-theme="a">
		<form>
			<label for="card" class="ui-hidden-accessible">Credit Card:</label>
			<input type="number" name="creditCard" id="card" value="" placeholder="Credit Card" data-theme="a" />
			<label for="feedback" class="ui-hidden-accessible">FeedBack:</label>
			<textarea name="feedBack" id="feedback" placeholder="Feedback" data-theme="a" ></textarea>
			<input type="submit" data-theme="b" value="Send"/>
			<p class="paymentResult"></p>
		</form>
		</div>
	</div>
	<div id="addRecommendation" data-role="dialog" data-theme="a" class="ui-corner-all">
		<header data-role="header"><h1>Add Recommendation</h1></header>
		<div data-role="content" data-theme="a">
		<form>
			<label for="recommendation" class="ui-hidden-accessible">Recommendation:</label>
			<textarea name="recommendation" id="recommendation" value="" placeholder="Recommendation" data-theme="a" ></textarea>
			<input type="hidden" id="recGameId" name="gameId" value="" />
			<input type="hidden" id="" name="userId" value="1" />
			<input type="submit" data-theme="b" value="Send"/>
			<p class="addRecommendationResult"></p>
		</form>
		</div>
	</div>
  </body>
</html>